<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="point-search">
            <div class="point-query">
                <a-form-item label="任务开始时间">
                    <!-- <day-range @change="(data)=>this.created_at = data" :constantTime="created_at" :style="{display: 'inline'}"></day-range> -->
                    <a-range-picker v-decorator="['created_at', {
                        rules: [{ type: 'array', required: false, message: 'Please select time!' }],
                    }]" style="width: 240px;"/>
                </a-form-item>
                <!-- <a-form-item label="任务周期：">
                    <time-range :time_range="time_range" @change="handleTimeChange"></time-range>
                </a-form-item> -->
                <a-form-item>
                    <a-input v-decorator="['name']"  placeholder="请输入报告/任务的名称或编号"/>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">筛选</a-button>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" @click="exports('')">导出</a-button>
                </a-form-item>
            </div>
        </a-form>

        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" :rowSelection="rowSelection" bordered>
            <template slot="task" slot-scope="text, record">
                {{record.order_name}}<p>{{record.task_sn}}</p>
            </template>
            <template slot="action" slot-scope="text, record">
                <div class="delete-image">
                    <router-link v-if="menu_role.includes('/report/update')" :to="'/report/update/'+record.id"><img src="./../../assets/images/view.svg" alt="" title="查看"></router-link>
                    <a @click="exports(record.id)"><img src="../../assets/images/upload.svg" alt="" title="导出"></a>
                    <a @click.stop.prevent="del(record)"><img src="./../../assets/images/delete.svg" alt="" title="删除"></a>
                </div>
            </template>
        </a-table>

    </div>
</template>
<script>
    import qs from 'qs'
    import TimeRange from "@/components/timeRange";
    import moment from 'moment';
    import DayRange from "@/components/dayRange";
    export default {
        components: {TimeRange,DayRange},
        data() {
            return {
                user_id: this.$store.getters.user_id,
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 5,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                form: this.$form.createForm(this),
                tableData: [],
                columns: [
                    {title: '报告编号', dataIndex: 'sn', align: 'center', width: '15%'},
                    {title: '报告名称', dataIndex: 'name', align: 'center', width: '15%'},
                    {title: '所属任务', dataIndex: 'order_name', align: 'center', width: '15%'},
                    {title: '所属任务编号', dataIndex: 'task_sn', align: 'center', width: '10%'},
                    {title: '生成时间', dataIndex: 'created_at', align: 'center', width: '15%'},
                    {title: '标注数量', dataIndex: 'num', align: 'center', width: '15%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center', width: '15%'},
                ],
                search: {},
                created_at: moment().format('YYYY-MM-DD') + ' ~ ' + moment().format('YYYY-MM-DD'),
                time_range: moment().format('Y年MM月') + '-' + moment().format('Y年MM月'),
                selectedRowKeys:[],
                notSelectKeys:[],
                isSelectAll:false
            };
        },

        mounted() {
            this.getList();

        },
        methods: {
            moment,
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};
                let data = await this.http( "get", "report/index", {...req, ...param});
                
                this.tableData = data.data;
                this.pagination.total = data.total_count;
                if(this.isSelectAll){
                    this.selectedRowKeys = this.tableData.map(x => {return x.id});
                }
                
            },
            onSubmit() {
                //搜索提交
                this.form.validateFields((err, values) => {
                    values = {...values, ...{time_range: this.time_range}}
                    if (!err) {
                        this.pagination.current = 1;
                        // values.created_at = moment(this.created_at.split('~')[0], 'YYYY-MM-DD').format('YYYY年MM月DD日') + '-' +
                        //     moment(this.created_at.split('~')[1], 'YYYY-MM-DD').format('YYYY年MM月DD日')
                        if (values.created_at && values.created_at.length > 0) {
                            let startAt = moment(values.created_at[0]).format('YYYY年MM月DD日')
                            let endAt = moment(values.created_at[1]).format('YYYY年MM月DD日')
                            let startEndAt = startAt + '-' + endAt
                            values.created_at = startEndAt
                        } else {
                            values.created_at = undefined
                        }
                        this.search = values
                        this.getList(values);
                    }
                })
            },
            handleTimeChange (changedFields) {
                this.time_range = changedFields.time_range.value;
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
            onSelectChange(val){
                if(this.isSelectAll){
                    /**查找两个数组不同的元素 */
                    let data = val.concat(this.selectedRowKeys).filter(function(v, i, arr) {
                        return arr.indexOf(v) === arr.lastIndexOf(v);
                    });
                    this.notSelectKeys.push(data)
                }
                this.selectedRowKeys = val
            },
            async del(data){
                let res = await this.http("delete","report/delete",{id:data.id})
                if(res.status ==200){
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            },
            exports(id=''){
                let params
                if(id){
                    params = {status:0,export:1,selects:id}
                }else{
                    params = {status:1,not_selects:this.notSelectKeys.join(','),export:1,...this.search}
                    /**不是选择所有数据 */
                    if( !this.isSelectAll){
                        if(this.selectedRowKeys.length <1){
                            this.$message.warning('请选择报告');return false
                        }
                        params = {status:0,selects:this.selectedRowKeys.join(','),export:1,...this.search}
                    }
                }
                
                open(process.env.VUE_APP_BASE_URL+'report/export?'+qs.stringify(params),'_blank')
            }
        },
        computed: {
            rowSelection() {
                const { selectedRowKeys } = this;
                return {
                selectedRowKeys,
                onChange: this.onSelectChange,
                hideDefaultSelections: true,
                selections: [
                    {
                        key: 'odd',
                        text: '选择单页数据',
                        onSelect: val => {
                            this.isSelectAll = false
                            this.selectedRowKeys = val
                        },
                    },
                    {
                        key: 'all-data',
                        text: '选择所有数据',
                        onSelect: val => {
                            this.isSelectAll = true
                            this.selectedRowKeys = val
                        },
                    }
                    
                ],
                onSelection: this.onSelection,
                };
            },
        },
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    #point-search {
        .ant-input {
            width: 250px;
        }

        .ant-select {
            width: 150px;
        }
    }

    .point-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }

    .delete-image {
        @include fj(space-around);
        align-items: baseline;
    }
</style>
